<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/table/table.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 数据表格</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>📊 数据表格组件演示</h2>
                
                <div class="controls">
                    <input type="text" id="searchInput" class="search-input" placeholder="搜索表格数据...">
                    <select id="sortSelect" class="sort-select">
                        <option value="">排序方式</option>
                        <option value="asc">升序</option>
                        <option value="desc">降序</option>
                    </select>
                    <button id="exportBtn" class="btn btn-primary">导出 CSV</button>
                </div>

                <div id="tableContainer" class="table-wrapper">
                    <!-- 表格将在这里渲染 -->
                </div>

                <div id="pagination" class="pagination">
                    <!-- 分页将在这里渲染 -->
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/table/table.css"&gt;
&lt;script src="components/table/table.js"&lt;/script&gt;

// 2. 定义列配置
const columns = [
    { key: 'id', label: 'ID', width: '60px', sortable: true },
    { key: 'name', label: '姓名', width: '120px', sortable: true },
    { key: 'email', label: '邮箱', width: '200px' },
    { key: 'status', label: '状态', width: '100px' }
];

// 3. 初始化表格
const table = new DataTable({
    container: '#tableContainer',
    columns: columns,
    data: data,
    pageSize: 10,
    paginationContainer: '#pagination'
});</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/table/table.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sampleData = [
                { id: 1, name: '张三', email: 'zhangsan@example.com', status: '活跃', joinDate: '2025-01-15' },
                { id: 2, name: '李四', email: 'lisi@example.com', status: '活跃', joinDate: '2025-01-10' },
                { id: 3, name: '王五', email: 'wangwu@example.com', status: '离线', joinDate: '2025-01-05' },
                { id: 4, name: '赵六', email: 'zhaoliu@example.com', status: '活跃', joinDate: '2024-12-28' },
                { id: 5, name: '孙七', email: 'sunqi@example.com', status: '活跃', joinDate: '2024-12-20' },
                { id: 6, name: '周八', email: 'zhouba@example.com', status: '离线', joinDate: '2024-12-15' },
                { id: 7, name: '吴九', email: 'wujiu@example.com', status: '活跃', joinDate: '2024-12-10' },
                { id: 8, name: '郑十', email: 'zhengshi@example.com', status: '活跃', joinDate: '2024-12-05' },
                { id: 9, name: '陈十一', email: 'chenshi@example.com', status: '离线', joinDate: '2024-11-30' },
                { id: 10, name: '黄十二', email: 'huangshi@example.com', status: '活跃', joinDate: '2024-11-25' },
                { id: 11, name: '刘十三', email: 'liushi@example.com', status: '活跃', joinDate: '2024-11-20' },
                { id: 12, name: '杨十四', email: 'yangshi@example.com', status: '活跃', joinDate: '2024-11-15' },
            ];

            const columns = [
                { key: 'id', label: 'ID', width: '60px', sortable: true },
                { key: 'name', label: '姓名', width: '120px', sortable: true },
                { key: 'email', label: '邮箱', width: '200px' },
                { key: 'status', label: '状态', width: '100px', render: (value) => {
                    const statusClass = value === '活跃' ? 'status-active' : 'status-offline';
                    return `<span class="status-badge ${statusClass}">${value}</span>`;
                }},
                { key: 'joinDate', label: '加入日期', width: '120px', sortable: true }
            ];

            const table = new DataTable({
                container: '#tableContainer',
                columns: columns,
                data: sampleData,
                pageSize: 5,
                paginationContainer: '#pagination'
            });

            // 搜索功能
            document.getElementById('searchInput').addEventListener('input', function(e) {
                table.search(e.target.value);
            });

            // 排序功能
            document.getElementById('sortSelect').addEventListener('change', function(e) {
                if (e.target.value) {
                    table.sort('id', e.target.value);
                }
            });

            // 导出功能
            document.getElementById('exportBtn').addEventListener('click', function() {
                table.exportCSV('table-data.csv');
            });
        });
    </script>
</body>
</html>
